<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <title>dia.Paper - interactive - elementMove disabled</title>

    <link rel="stylesheet" type="text/css" href="../../../../css/lib/joint.min.css"/>

    <style>
        .joint-paper {
            border: 1px solid gray;
            width: 800px
        }

        body {
            margin: 0;
        }
    </style>
</head>
<body>


<!-- Dependencies: -->
<script src="../../../../js/lib/jquery.min.js"></script>
<script src="../../../../js/lib/lodash.min.js"></script>
<script src="../../../../js/lib/backbone.min.js"></script>

<script src="../../../../js/lib/joint.min.js"></script>

</body>
<script>
    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('<div/>').appendTo(document.body),
        width: 190,
        height: 90,
        gridSize: 1,
        interactive: {
            elementMove: false,
            addLinkFromMagnet: true
        },
        model: graph
    });

    var Circle = joint.dia.Element.define('i.Circle', {
        markup: '<g><circle/><text/></g>>',
        attrs: {
            circle: {
                magnet: 'passive',
                r: 20
            },
            text: {
                fill: 'white',
                fontSize: 8,
                xAlignment: 'middle',
                yAlignment: 'middle'
            }
        }
    });

    graph.addCell(new Circle()
        .position(36, 34)
        .attr('circle/fill', '#333333')
    );

    graph.addCell(new Circle()
        .position(147, 50)
        .attr('circle/fill', '#a6a6a6')
        .attr('circle/r', 30)
        .attr('circle/magnet', true)
        .attr('text/text', 'MAGNET')
    );

</script>
</html>
